<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环遍历</title>
    <style>
        .changeColor{
            color: aqua;
        }
    </style>
</head>
<body>
    <ul>
        <li>媒体查询响应式布局</li>
        <li>媒体查询响应式布局</li>
        <li>媒体查询响应式布局</li>
        <li>媒体查询响应式布局</li>
        <li>媒体查询响应式布局</li>
    </ul>
</body>
</html>
<script>
    //循环遍历
    //for
    let lessions = [
        {title:"媒体查询响应式布局",category:'css'},
        {title:"FLEX弹性合作模型",category:'css'},
        {title:"MYSQL多表查询随意操作",category:'mysql'}
    ];
    //给每个title都加上后盾人
    //引用类型会改变原数组的内容
    // for(let i = 0 ; i < lessions.length ; i++){
    //     lessions[i].title = `后盾人${lessions[i].title}`;
    // }
    // console.table(lessions);

    //for in 
    //遍历的时候key值为数组的索引
    // for(const key in lessions){
    //     console.log(`标题:${lessions[key].title}`);
    // }

    //for of  每次循环取出的是值
    // for(const item of lessions){
    //     console.log(`
    //         标题:${item.title}
    //         栏目:${item.category == 'css' ? '前端' : '数据库'}
    //     `);
    // }

    //forEach
    // lessions.forEach((item,index) => {
    //     // item.title = item.title.substr(0,5);
    //     lessions[index].title = lessions[index].title.substr(0,5);
    //     // console.log(array)
    // });
    // console.log(lessions)

    //forEach可以操作dom元素
    // let lis = document.querySelectorAll("li");
    // lis.forEach(function(item){
    //     item.addEventListener('click',function(){
    //         this.classList.toggle('changeColor');
    //     });
    // });
        
    

    

</script>